[#include "../../../common/html.ftl" /]
[@html]
    [@head title="组织机构树选择" css=["fw", "ztree-ajax"] ]
        <style>
            body{height:auto;font-family: "Microsoft YaHei";}
            button{font-family: "SimSun","Helvetica Neue",Helvetica,Arial;}
            .fw-main {
                overflow-y:auto;
                box-shadow: inset 0 0px 10px rgba(0,0,0, 0.15), 0 15px 25px rgba(0, 0, 0, 0.15);
                background-color: #fff;
                border: 1px solid #aaa;
                margin-bottom: 10px;
            }
            .treeShowHideButton {
                right: 28px;
            }
        </style>
    [/@head]
    [@body class="hold-transition box box-main fw-none-bg" style="padding:0px 20px;"]
        [@main]
            <input id="treeId" name="treeId" type="hidden" value="${(sysDept.parentId)!}"/>
            <input id="treeName" name="treeName" type="hidden" value="${(sysDept.parentName)!}"/>

            <div class="wrapper">
                <div class="treeShowHideButton" onclick="$.tree.toggleSearch();">
                    <label id="btnShow" title="显示搜索" style="display:none;">︾</label>
                    <label id="btnHide" title="隐藏搜索">︽</label>
                </div>
                <div class="treeSearchInput" id="search">
                    <label for="keyword">关键字：</label><input type="text" class="empty" id="keyword" maxlength="50">
                    <button class="btn" id="btn" onclick="$.tree.searchNode()"> 搜索 </button>
                </div>
                <div class="treeExpandCollapse">
                    <a href="#" onclick="$.tree.expand()">展开</a> /
                    <a href="#" onclick="$.tree.collapse()">折叠</a>
                </div>
                <div id="tree" class="ztree treeselect"></div>
            </div>
        [/@main]

        [@script js=["fw", "ztree-ajax"] progress="false" ]
            <script type="text/javascript">
                $(function() {
                    var url = ctx + "osfw/system/manage/dept/deptTreeDataImmediateChild";
                    var options = {
                        url: url,
                        expandLevel: 1,
                        onClick : zOnClick
                    };
                    $.tree.init(options);
                });

                function zOnClick(event, treeId, treeNode) {
                    var treeId = treeNode.id;
                    var treeName = treeNode.name;
                    $("#treeId").val(treeId);
                    $("#treeName").val(treeName);
                }
            </script>
        [/@script]
    [/@body]
[/@html]

